<template>
	<view class="main">
		<view class="main__section" v-if="showList">
			<!-- <scroll-view class="letter-scroll" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true" :style="{height:clientHeight+'px'}"> -->
			<view class="header-search">
				<!-- 左边icon -->
				<view class="header-search__location">
					<text class="iconfontPT icondingwei"></text>
					<view class="address" @click="choosecity()">
						<text class="eclips">{{ city }}</text>
					</view>
				</view>
				<!-- 右边搜索 -->
				<view class="search">
					<view class="search-icon"><image src="../static/assets/index/icon-serch.png"></image></view>
					<input @confirm="confirm" @blur="confirm" confirm-type="search" v-model="searchVal" type="text" placeholder="输入车辆的名称或品牌" />
				</view>
			</view>
			<!-- banner -->
			<view class="banner">
				<swiper indicator-dots="true" indicator-color="rgba(255,255,255,1)" indicator-active-color="#E41805" autoplay="true" interval="5000">
					<swiper-item v-for="(item, index) in bannerList" :key="index"><image lazy-load="true" :src="item.image" mode="widthFix"></image></swiper-item>
				</swiper>
			</view>

			<view class="car-selection">
				<view class="brandList">
					<view class="item" v-for="(item,index) in brandList" :key="index" @click="handleJumpPage(item.url)">
						<view class="iconBox"><image class="icon" :src="item.icon" mode="aspectFill"></image></view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>

			<view class="car-selection car-selection--special">
				<view class="priceList">
					<view class="price" @click="getData('*', 3)"><text>3万以下</text></view>
					<view class="price" @click="getData(3, 5)"><text>3-5万</text></view>
					<view class="price" @click="getData(5, 10)"><text>5-10万</text></view>
					<view class="price" @click="getData(10, 20)"><text>10-20万</text></view>
					<view class="price" @click="getData(20, '*')"><text>20万以上</text></view>
				</view>
				<view class="brandList">
					<view class="item" v-for="(item, index) in tjlist" @click="toBrand(item.id, item.name)" :key="index">
						<view class="iconBox"><image :src="item.logo_image" mode="aspectFill" lazy-load="true"></image></view>
						<text>{{ item.name }}</text>
					</view>
				</view>

				<view class="brandList brandList--ad">
					<view class="item" v-for="(item, index) in crops" @click="toBrand(item.brand_id, item.name)" :key="index">
						<view class="iconBox"><image :src="item.image" mode="aspectFill" lazy-load="true"></image></view>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>

			<view class="youlike">
				<view class="title bold">热卖车辆</view>
				<scroll-view class="active-switch" scroll-x="true" :scroll-into-view="id" scroll-with-animation>
					<view class="scroll-box" :style="'width:' + widthVal">
						<view class="item" @click="gotoInfoPage(item.id)" v-for="(item, index) in likeList" :key="index">
							<image class="car-msg__img" :src="item.image" mode="aspectFill" lazy-load="true"></image>
							<view class="car-msg">
								<view class="car-msg__name u-line-2">{{ item.carname }}</view>
								<view class="car-msg__card-time">
									<text class="car-msg--label car-msg--label--style2">{{ item.card_time }}</text>
									<text class="car-msg--label">{{ item.mileage }}</text>
								</view>
								<view class="car-msg__price">{{ item.update_price||item.price}}万</view>
							</view>
							<view class="car-tags">
								<view class="car-tags__tag car-tags__tag--fast" v-if="item.is_fast">急</view>
								<view class="car-tags__tag car-tags__tag--drop" v-if="item.is_drop">降</view>
								<view class="car-tags__tag car-tags__tag--new" v-if="item.is_fast && item.is_drop ? false: item.is_new">新</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<view class="allCar"></view>
		<!-- 字母查找 -->
		<!-- <view :id="index" class="scroll-view-item" v-for="(item,index) in scrollBrand" :key="index">
				<view class="letter-title">{{index}}</view>
				<view class="letter-record" v-for="(list, cindex) in item" :key="cindex" @click="toBrand(list.id,list.name)"
				 :data-id="list.id" :data-name="list.name">
					<view class="letter-img">
						<image mode="aspectFit" lazy-load="true" class="icon-logo-list" :src="list.logo_image"></image>
					</view>
					<view class="letter-name">{{list.name}}</view>
				</view>
			</view> -->
		<!-- </scroll-view> -->
		<!-- view class="navigation-bars">
			<view class="navigation-bars-initial " :class="letterActive==item?'active':''" v-for="(item,index) in initial" :key="index"
			 @click="goToNode(item)">
				{{item}}
			</view>
		</view> -->
		<view class="car-list-section">
			<u-index-list :scrollTop="scrollTop" :index-list="indexList" :activeColor="'#E41805'">
				<view class="scroll-view-item" v-for="(item, index) in scrollBrand" :key="index">
					<u-index-anchor :index="index" :custom-style="{ backgroundColor: '#f8f8f8' }" />
					<view
						class="letter-record u-border-bottom"
						v-for="(list, cindex) in item"
						@click="toBrand(list.id, list.name)"
						:data-id="list.id"
						:data-name="list.name"
						:key="cindex"
					>
						<view class="letter-img"><image mode="aspectFit" lazy-load="true" class="icon-logo-list" :src="list.logo_image"></image></view>
						<view class="letter-name">{{ list.name }}</view>
					</view>
				</view>
			</u-index-list>
		</view>
		<homeTabBar :showstatus="showstatus" />
	</view>
</template>
<script>
import { index, brandsList } from '../apis/used-car/api.js';
import homeTabBar from './home-tab-bar/index.vue';

export default {
	data() {
		return {
			city: '成都',
			// initial: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U',
			// 	'V', 'W', 'X', 'Y', 'Z'
			// ], //字母导航
			// toView: '',
			// letterActive: "",
			scrollBrand: [],
			tjlist: [],
			crops: [],
			bannerList: [],
			searchVal: '', // 查询关键字
			likeList: [], // 猜你喜欢列表
			widthVal: '',
			scrollTop: 0,
			indexList: [],
			showList: false,
			showstatus:0
		};
	},
	computed:{
		brandList(){
			return [
				{
					name:'买二手车',
					url:`/pages/used-car/carList?city=${this.city}`,
					icon: require('@/static/images/shopindex.png')
				},
				{
					name:'我要卖车',
					url:`/pages/used-car/SellingCars?city=${this.city}`,
					icon:require('@/static/images/sell.png')
				},
				{
					name:'卖家急卖',
					url:`/pages/used-car/carList?is_fast=1&city=${this.city}`,
					icon:require('@/static/images/ji.png')
				},
				{
					name:'预约购车',
					url:`/pages/used-car/Reservation?city=${this.city}`,
					icon:require('@/static/images/hot.png')
				},
			]
		}
	},
	components: {
		homeTabBar
	},
	onLoad() {
		this.$loading.show();
		
		index().then(res => {
			if (res.code == 1) {
				this.likeList = res.data.like;
				this.tjlist = res.data.index_brand;
				this.crops = res.data.crops;
				this.bannerList = res.data.ad;
				this.widthVal = this.likeList.length * 280 + 'rpx';
			}
		});
		this.brand();
	},
	onShow() {
		const that = this;
		that.showstatus=uni.getStorageSync('showSataus');
		uni.getStorage({
			key: 'position',
			success(e) {
				that.city = e.data || '成都';
			}
		});
		this.$store.dispatch('home-tab-bar/setCurrentTabbar', 3);
	},
	methods: {
		handleJumpPage(url){
			if(uni.getStorageSync('openId')){
				uni.navigateTo({url})
			}else{
				uni.navigateTo({
					url: '/pages/authorize'
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* 获取车系列表*/
		brand() {
			brandsList()
				.then(res => {
					this.scrollBrand = res.data.brands;
					this.indexList = Object.keys(res.data.brands) || [];
					this.showList = true;
					this.$loading.hide();
				})
				.catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
		},
		choosecity() {
			uni.navigateTo({
				url: `../../new-car/component/city-model/city`
			});
			uni.$once('city-change',city=>{
				index({
					city:uni.getStorageSync('position')
				}).then(res=>{
					if(res.code === 1){
						this.likeList = res.data.like;
					}
				})
			})
		},
		/**
		 * 去到对应的节点
		 */
		// goToNode(val) {
		// 	let that = this;
		// 	var hash = val;
		// 	that.toView = hash;
		// 	that.letterActive = hash
		// },
		gotoInfoPage(val) {
			console.log(val);
			uni.navigateTo({
				url: '/pages/used-car/infoPage?car_id=' + val
			});
		},
		confirm() {
			console.log(this);
			uni.navigateTo({
				url: '/pages/used-car/carList?search=' + this.searchVal + '&city=' + this.city
			});
		},
		toBrand(id, name) {
			uni.navigateTo({
				url: '/pages/used-car/carList?brand_id=' + id + '&name=' + name
			});
		},
		getData(a, b) {
			uni.navigateTo({
				url: '/pages/used-car/carList?min_price=' + a + '&max_price=' + b + '&city=' + this.city
			});
		}
	}
};
</script>
<style scoped lang="less">
.main {
	padding-bottom: 185rpx;

	&__section {
		background-color: #f8f8f8;
		padding: 0 30rpx;
	}

	.car-list-section {
		padding: 0 30rpx;
	}
}

.header-search {
	width: 100%;
	height: 88rpx;
	position: relative;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	z-index: 99;
	
	&__location {
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		margin-right: 20rpx;
		padding: 10rpx;
	}

	.address {
		margin: 0;
		font-size: 28rpx;
		margin-left: 10rpx;

		text {
			color: #333;
		}
	}

	.search {
		flex: 1;
		width: 100%;
		height: 56rpx;
		background: #fff;
		font-size: 26rpx;
		display: flex;
		border-radius: 10rpx;
		align-items: center;
		color: #afafaf;

		.search-icon {
			display: block;
			width: 56rpx;
			height: 30rpx;
			text-align: center;

			image {
				width: 30rpx;
				height: 30rpx;	
			}
		}

		input {
			display: inline-block;
			height: 64rpx;
			width: 88%;
			padding-left: 16rpx;
			background: transparent;
			outline: none;
			vertical-align: middle;
		}
	}
}

.banner {
	margin-top: 8rpx;
	height: 210rpx;
	overflow: hidden;

	image {
		width: 100%;
	}
}

.car-selection {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 15rpx 30rpx;
	margin-top: 20rpx;

	// 品牌列表
	.brandList {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.item {
			text-align: center;
			padding: 15rpx;

			.iconBox {
				width: 100%;
				text-align: center;
			}

			image {
				width: 100%;
				height: 68rpx;

				&.icon {
					width: 56rpx;
					height: 56rpx;
				}
			}

			text {
				font-size: 24rpx;
				color: #333;
				font-weight: 400;
			}
		}
	}

	.priceList {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.price {
			padding: 16rpx;
			text-align: center;
			background-color: #f2f2f2;
			border-radius: 12rpx;
			font-size: 24rpx;

			text {
				line-height: 1;
				font-size: 24rpx;
				font-weight: 400;
				color: #333;
			}
		}
	}

	&--special {
		padding: 20rpx;

		.brandList {
			margin-top: 30rpx;

			.item {
				width: 68rpx;
			}
			
			&--ad {
				.item {
					width: calc(100%/3 - 40rpx);
					
					image {
						height: 100rpx;
					}
				}
			}
		}
	}
}

.youlike {
	width: 100%;
	margin-top: 30rpx;

	.title {
		font-size: 34rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.scroll-box {
		height: 400rpx;
		display: flex;

		.item {
			box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.01);
			border-radius: 10rpx;
			background-color: #fff;
			margin-right: 14rpx;

			height: 370rpx;
			width: 280rpx;
			overflow: hidden;
			position: relative;

			.car-msg {
				padding: 14rpx;

				&__img {
					width: 100%;
					height: 180rpx;
				}


				&__name {
					color: #333;
					font-size: 24rpx;
					height: 63rpx;
				}

				&__price {
					font-size: 30rpx;
					color: #e74438;
					font-weight: 600;
				}

				&__card-time {
					margin: 10rpx 0 10rpx;
				}

				&--label {
					border-radius: 8rpx;
					background-color: rgba(68, 169, 255, .6);
					margin: 0 10rpx 0 0;
					padding: 4rpx 10rpx;
					color: #fff;
					font-size: 20rpx;
					
					&--style2 {
						background-color: rgba(255, 129, 55, .6);
					}
				}
			}
			.car-tags{
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				&__tag{
					width: 32rpx;
					height: 37rpx;
					color: #FFFFFF;
					border-radius: 5rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;
					margin-right: 10rpx;
					&--fast{
						background: linear-gradient(#F88133,#F63E2B);
					}
					&--drop{
						background: linear-gradient(#F76547,#F53C38);
					}
					&--new{
						background: linear-gradient(#7CF595,#52D341);
					}
				}
			}
		}
	}
}

.navigation-bars {
	z-index: 2;
	position: fixed;
	top: 100rpx;
	right: 10rpx;
	width: 30rpx;

	.navigation-bars-initial {
		display: flex;
		width: 30rpx;
		height: 30rpx;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		color: #999;
		margin: 12rpx auto;
		font-size: 24rpx;
		border-radius: 50%;

		&.active {
			background: #e41805;
			color: #fff;
		}
	}
}

.letter-scroll {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.scroll-view-item {
	height: auto;
	margin: 0 -30rpx;
	// padding-top: 80rpx;
}

// .scroll-view-item .letter-record:last-child{
// 	margin-bottom: 0!important;
// }

.letter-title {
	background: #f8f8f8;
	color: #969696;
	font-size: 20rpx;
	padding-left: 30rpx;
	margin-bottom: 40rpx;
}

.letter-record {
	display: flex;
	height: 65rpx;
	align-items: center;
}

.letter-img {
	margin: 0 50rpx;
	width: 95rpx;
	height: 65rpx;
	text-align: center;
	padding: 20rpx 0;
}

.letter-img image {
	width: 100%;
	height: 100%;
}

.icon-logo-list {
	width: 96px;
	height: 66rpx;
}

.letter-name {
	font-size: 28rpx;
	color: #333;
}

.scroll-view-item {
	height: auto;
	// padding-top: 80rpx;
}

// .scroll-view-item .letter-record:last-child{
// 	margin-bottom: 0!important;
// }

.letter-title {
	background: #f8f8f8;
	color: #969696;
	font-size: 20rpx;
	padding-left: 30rpx;
	margin-bottom: 40rpx;
}

.letter-record {
	display: flex;
	height: 65rpx;
	align-items: center;
	padding: 20rpx;
}

.letter-img {
	margin: 0 50rpx 0 20rpx;
	width: 95rpx;
	height: 65rpx;
	text-align: center;
}

.letter-img image {
	width: 100%;
	height: 100%;
}

.icon-logo-list {
	width: 96px;
	height: 66rpx;
}

.letter-name {
	font-size: 28rpx;
	color: #333;
}
</style>
